/**
 * querySelector()返回匹配指定 CSS 选择器元素的第一个子元素
 * querySelector与getElementBy系列方法的区别:
 * querySelector方法接收的参数是一个 CSS 选择符。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name
 **/
function myFunction() {
    document.querySelector('.demo').innerHTML = 'Hello World';
    console.log(document.querySelector('.demo'));
    console.log(document.querySelectorAll('.demo'));
}

/**
 * querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素，而querySelectorAll 可以获取多个元素。
 * querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。
 * querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空
 */
//在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素
console.log(document.querySelector("div.test>p:first-child"));
console.log(document.querySelectorAll("div.test>p")[0]);